// src/components/authentication/WechatLogin.js
import React, { useEffect, useState } from 'react';
import useAuth from 'hooks/useAuth'; // 引入 useAuth 钩子
import io from 'socket.io-client';
import axios from 'utils/axios';

// 新增代码 - 添加样式
const styles = {
  imgContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  img: {
    maxWidth: '100%', // 使图片宽度不超过容器
    maxHeight: '100%' // 使图片高度不超过容器
  }
};
const WechatLogin = () => {
  const { loginWithToken } = useAuth(); // 使用 useAuth 钩子获取 JWT 上下文的方法
  const [qrcodeUrl, setQrcodeUrl] = useState(null);

  const initializeWebSocket = (sceneStr) => {
    const baseUrl = process.env.REACT_APP_API_URL || 'http://127.0.0.1:3020/';
    console.log('weChatLogin.baseurl', baseUrl);
    const socket = io(baseUrl);
    console.log('尝试连接至 WebSocket 服务器...'); // 打印日志

    socket.on('connect', () => {
      console.log('已成功连接至 WebSocket 服务器'); // 打印日志
      socket.emit('userConnected', { sceneStr }); // 发送用户连接事件，携带用户 ID
      socket.emit('testEvent', { data: 'This is a test.' });
    });

    socket.on('login', (jwt) => {
      console.log('收到登录事件，携带 JWT:', jwt); // 打印日志
      loginWithToken(jwt); // 使用上下文的方法存储和处理 JWT
      // 这是存储 JWT 到 localStorage 的代码
      //   localStorage.setItem('token', jwt);
      // 关闭 WebSocket 连接
      socket.disconnect();
      console.log('WebSocket 连接已关闭'); // 打印日志
    });

    socket.on('connect_error', (error) => {
      console.error('连接错误:', error); // 打印错误信息
    });

    // 新增代码
    socket.on('connect_timeout', (timeout) => {
      console.error('连接超时:', timeout);
    });

    socket.on('reconnect', (attemptNumber) => {
      console.log('重新连接:', attemptNumber);
    });

    socket.on('reconnect_attempt', () => {
      console.log('尝试重新连接');
    });

    socket.on('reconnecting', (attemptNumber) => {
      console.log('重新连接中:', attemptNumber);
    });

    socket.on('reconnect_error', (error) => {
      console.error('重新连接错误:', error);
    });

    socket.on('reconnect_failed', () => {
      console.error('重新连接失败');
    });

    return () => {
      //   socket.disconnect();
    };
  };
  useEffect(() => {
    // axios.get('http://localhost:3020/')
    axios.get('/auth/wechat/qrcode').then((response) => {
      console.log(response.data);
      const sceneStr = response.data.scene_str;
      setQrcodeUrl(response.data.qrcode_url);
      // 在这里调用 initializeWebSocket 函数
      initializeWebSocket(sceneStr);
    });
  }, []);

  return (
    // 修改的部分 - 使用样式
    <div style={styles.imgContainer}>{qrcodeUrl && <img src={qrcodeUrl} alt="QR Code" style={styles.img} />}</div>
  );
};

export default WechatLogin;
